<template>
  <div class="shouAddsse">
    <h1 class="page-title">添加收货地址</h1>

    <div class="address-container">
      <div class="address-list">
        <van-address-list
          v-model="chosenAddressId"
          add-button-text="新增地址"
          @add="onAdd"
          @edit="onEdit"
        />

        <!-- 新增地址列表展示 -->
        <div v-if="list.length > 0">
          <ul>
            <li v-for="address in list" :key="address.id">
              <el-radio-group v-model="address.findstatus" @change="handleRadioChange(address.id)">
                <el-radio :label="'默认'"></el-radio>
              </el-radio-group>

              <div class="address-details">
                <p>姓名：{{ address.findname }}</p>
                <p>手机号：{{ address.findphone }}</p>
                <p>省份：{{ address.findaddss }}</p>
                <p>详细地址：{{ address.findxiang}}</p>
                <p>邮政编号：{{ address.findyz }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <van-popup
        v-model="show"
        closeable
        position="bottom"
        class="address-popup"
      >
        <van-address-edit
          :area-list="areaList"
          show-postal
          show-delete
          show-set-default
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="onDelete"
          @change-detail="onChangeDetail"
          :required="false"
        />
      </van-popup>
    </div>
  </div>
</template>


<script>
import {Toast} from 'vant';
import axios from "axios";
import {areaList} from "@vant/area-data";

export default {

  data() {
    return {
      areaList,
      chosenAddressId: '1',
      list: [],
      show: false,


      adds: {
        addressDetail: '',
        areaCode: '',
        isDefault: '',
        name: '',
        postalCode: '',
        tel: '',
        id: 0
      }
    }
  },
  methods: {
    handleRadioChange(value) {
      // 后端接口
      axios.get(`/admin/findaddss/findstatusByid?findId=${value}&useId=${this.id}`).then(res=>{
        if (res.data.code==0){
          this.$message.success("设置成功")
        }else {
          this.$message.error("设置失败")
        }
      })

      console.log('当前值:', value);
    },
    onAdd() {
      this.show = true;
      Toast('新增地址');
    },

    onEdit(item, index) {
      Toast(`编辑地址: ${index}`);
      // Logic to populate the edit form can be added here
    },

    onSave(addressInfo) {
      console.log(addressInfo)
      this.adds = addressInfo;
      axios.post(`/admin/findaddss/findAddssave?id=${this.id}`, addressInfo).then(res => {
        if (res.data.code == 0) {
          Toast('添加成功');
          this.addssList(); // 刷新地址列表
        } else {
          Toast('添加失败');
        }
      });
      this.show = false; // Close popup after saving
    },

    onDelete() {
      Toast('地址已删除');
      // Logic to delete the address
    },

    onChangeDetail(val) {
      if (val) {
        this.searchResult = [{ name: '黄龙万科中心', address: '杭州市西湖区' }];
      } else {
        this.searchResult = [];
      }
    },

    addssList() {
      axios.get(`/admin/findaddss/addsList?id=${this.id}`).then(res => {
        this.list = res.data.data;
      });
    },

  },
  created() {
    this.id = localStorage.getItem("token");
    // const areaList = {
    //   province_list: {},
    //   city_list: {},
    //   county_list: {}
    // };
    // this.provinces.forEach(province => {
    //   areaList.province_list[province] = {
    //     name: province,
    //     code: province
    //   };
    // });
    // for (const province in this.cities) {
    //   const cityArr = this.cities[province];
    //   areaList.city_list[province] = {};
    //   cityArr.forEach(city => {
    //     areaList.city_list[province][city] = {
    //       name: city,
    //       code: city
    //     };
    //   });
    // }
    // this.areaList = areaList;
    this.addssList();
  }
}
</script>

<style scoped>
.shouAddsse {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.address-container {
  display: flex;
  flex-direction: column;
}

.address-list {
  margin-bottom: 20px;
}

.address-popup {
  padding: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: white;
  display: flex;
  align-items: center;
}

.address-details {
  margin-left: 10px;
}

/* 额外样式，可以根据需要增加 */
input[type="radio"] {
  margin-right: 10px;
}
</style>
